<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>上传页面</title>

    <!-- Bootstrap -->
    <link href="/hoyo/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/hoyo/css/mine.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
    	*{
    		font-family: "Microsoft YaHei";
    	}
		#data-nav{
			margin-bottom: 20px;
		}
		.upload{
			height: 500px;
			text-align: center;
			padding-top: 180px;
			background-color: #FFFFFF;
			border-radius: 4px;
			margin-bottom: 20px;
		}
		.upload-btn{
			display: inline-block;
			width: 260px;
			height: 74px;
			background: url(/hoyo/img/upload-btn.png) no-repeat 0 0;
			cursor: pointer;
		}
		.upload-hint{
			font-size: 16px;
			text-align: center;
			padding-top: 30px;
			transition: all .35s linear;
		}
		.upload-explain{
			border-radius: 4px;
			background-color: #FFFFFF;
			padding-top: 20px;
			padding-bottom: 20px;
			box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
			box-sizing: border-box;
			padding-left: 10%;
			margin-bottom: 20px;
		}
		.title{
			font-size: 12px;
			font-weight: 700;
			margin-bottom: 12px;
		}
		.help-menu{
			color: #6d757a;
			box-sizing: border-box;
			list-style: none;
			padding: 0;
		}
		.help-menu li{
			position: relative;
			padding-left: 14px;
			margin-bottom: 10px;
		}
		.dot{
			position: absolute;
			top: 6px;
			left:0;
			margin-top: -2px;
			width: 6px;
			height: 6px;
			border-radius: 3px;
			background-color: #00A1D6;margin-right: 8px;
		}
		body{
			background-color: #00A1D6;
		}
		.qa-list{
			list-style:none;
			padding: 0;
		}
		.qa-list li{
			display: inline-block;
		}
		.qa-list li a{
			color: #99a2aa;
			display: inline-block;
			padding-right: 10px;
		}	
		.cover-wrp{
			position: relative;
			background-color: #FFFFFF;
		}
		.cover-box{
			width: 160px;
			height: 100px;
			cursor: pointer;
			margin-bottom: 20px;
			background: url(/hoyo/img/upload-pic-bc.png) no-repeat 0 0;
			background-size: cover;
			position: relative;
			overflow: hidden;
		}
		.cover-box img{
			width: 100%;
			height: 100%;
			border-radius: 4px;
			border-style: none;
			vertical-align: middle;
		}
		.cover-mask{
			width: 100%;
			height: 100%;
			border-radius: 4px;
			position: absolute;
			top: 0;
			left: 0;
			line-height: 100px;
			background-color: rgba(0,0,0,0.5);
			text-align: center;
			color: #FFFFFF;
			font-size: 14px;
			font-weight: 700;
		}
		.cover-wrp .cover-box input{
			position: absolute;
			font-size: 100px;
			right: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
			z-index: -1;
			display: none;
		}
		.cover-tip-wrp{
			position: relative;
			width: 160px;
			border-radius: 4px;
		}
		.tip-list{
			position: relative;
		}
		.left-dot{
			float: left;
			width: 6px;
			height: 6px;
			margin-right: 4px;
			margin-top: 6px;
			border-radius: 3px;
			background-color: #99A2AA;
		}
		.upload-container{
			border-radius: 4px;
			background-color: #FFFFFF;
			padding-top: 20px;
			padding-bottom: 20px;
			box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
			margin-bottom: 20px !important;
			padding-left: 30px;
			padding-right: 30px;
			display: none;
		}
		.row{
			margin: 0;
		}
		.tip-text{
			font-size: 12px;
			line-height: 20px;
			color: #99A2AA;
			
		}
		.upload-wrp{
			position:relative;
			padding-top:10px;
			padding-bottom: 10px;
			margin-bottom: 30px;
		}
		.file-menu{
			list-style: none;
			padding: 0;
		}
		.menu-item{
			width: 100%;
			padding-left: 0;
			padding-right: 0;
			border-radius: 4px;
		}
		.order-wrp{
			position:relative;
			padding-left: 10px;
			text-align:center;
		}
		.file-icon{
			width:44px;
			height: 44px;
			text-align:center;
		}
		.order-num{
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-51%);
			width: 44px;
			height: 44px;
			line-height: 44px;
			text-align: center;
			z-index: 10;
			color: #FFFFFF;
			font-size: 18px;
		}
		.meta-wrp{
			position: relative;
			color:#99A2AA;
			padding: 0;
		}
		.status-wrp{
			position:relative;
			height: 32px;
			padding: 4px 0 10px;
		}
		.name-wrp{
			position: relative;
			display: inline-block;
			cursor: pointer;
			vertical-align: top;
			margin-right: 20px;
			max-width: 160px;
			overflow: hidden;
		}
		.name{
			position: relative;
			z-index: 100;
			max-width: 160px;
			height: 19px;
			overflow: hidden;
			display: inline-block;
		}
		.name-input{
			position: relative;
			top:-3px;
			border: 1px solid #e5efe9;
			height: 24px;
			border-radius: 2px;
			padding: 0 5px;
		}
		.upload-status{
			display: inline-block;
			vertical-align: top;
		}
		.right{
			float: right;
		}
		.act-wrp{
			position:relative;
			display: inline-block;
		}
		.progress-wrp{
			position:relative;
			border-radius: 2px;
			background-color: #ccd0d7;
		}
		.drag-hint{
			position:absolute;
			bottom: 16px;
			left: 50%;
			transform: translateX(-50%);
			border:1px solid #e5efe9;
			border-radius: 4px;
			background-color: #f4f5f7;
			padding: 3px 10px;
			color: #222222;
			animation: hideDragHit 5s ease forwards;
		}
		.upload-add-btn{
			width: 140px;
			height: 32px;
			background: url(/hoyo/img/upload-add-bc.png) no-repeat 0 0;
			margin-left: 10px;
		}
		.right{
			float: right;
		}
		.progress{
			height: 5px;
		}
		.basic-info{
			text-align: left;
			border-bottom: 1px solid #E5E9EF;
			box-sizing: content-box;
			margin-bottom: 30px;
		}
		.basic-info-icon{
			display: inline-block;
			position: absolute;
			height: 14px;
			bottom: -5px;
			left: 50%;
			transform: translateX(-50%);
		}
		.basic-info-title{
			position:relative;
			display: inline-block;
			padding: 5px 10px;
			text-align: center;
			border-bottom: #1296db solid 1px;
			margin-bottom: -1px;
			color: #1296db;
		}
		.section{
			position: relative;
			margin-bottom: 30px;
		}
		.control-group{
			display: inline-block;
			width: 100%;
			text-align: left;
			vertical-align: top;
			background-color: #FFFFFF;
			height: 19px;
			line-height: 19px;			
		}
		.section>h3{
			font-weight: 400;
			font-size: 14px;
			color: #222222;
			padding-bottom: 14px;
		}
		.title-hint{
			color: #00a1d6;
			line-height: 28px;
		}
		.section .type-menu{
			position: relative;
			list-style: none;
			display: block;
			padding: 0;
		}
		
		.section .type-menu>li{
			display: inline-block;
		}
		
		.type-btn{
			display: block;
			min-width: 77px;
			height: 32px;
			line-height: 32px;
			padding: 0 10px;
			border-radius: 4px;
			border:1px solid #ccd0d7;
			text-align: center;
			background-color: #F4F5F7;
			font-size: 14px;
			margin-right: 10px;
			margin-bottom: 10px;
			cursor: pointer;
		}
		.is-selected{
			background-color: #00a1d6;
			color: #FFFFFF;
			border-color: #00A1D6;
		}
		.section .type-hint{
			line-height: 24px;
		}
		.section .outline{
			font-size: 14px;
			color: #00A1D6;
		}
		.section .title-wrp{
			position: relative;
		}
		.is-error{
			border-color: #e40c0c;
		}
		.title-wrp .count-wrp{
			position: absolute;
			right: 1px;
			top: 1px;
			height: 32px;
			line-height: 32px;
			padding: 0 10px;
			min-width: 40px;
			text-align: center;
			color: #99a2aa;
			border-radius: 4px;
			background-color: hsla(0,0%,100%,0.8);
			font-size: 12px;
		}
		
		.error-wrp{
			position: relative;
			height: 30px;
			line-height: 30px;
			color: palevioletred;
			font-size: 14px;
			margin-top: 5px;

		}
		.section .description-wrp{
			position: relative;
		}
		
		.section .description-wrp textarea{
			height: 150px;
			display: block;
			font-size: 12px;
			color: #222222;
			padding: 5px 12px;
			resize: none;
		}
		.submit-wrp{
			text-align: center;
		}
		.description-wrp .count-wrp{
			position: absolute;
	    right: 10px;
	    bottom: 10px;
	    min-width: 40px;
	    text-align: center;
	    font-size: 12px;
	    color: #99a2aa;
	    background: hsla(0,0%,100%,.8);
		}
		.control-type-label{
			margin: 0;
			height: 19px;
			line-height: 19px;
			width: 30px;
			text-align: center;
			padding-right: 10px;
			box-sizing: content-box;
			vertical-align: top;
			font-size: 14px;
			font-weight: normal;
		}
		
		.control-type-radio{
			margin: 0 !important;
			margin-top: 3px !important;
		}
		.act-wrp-btn{
			padding:0 3px;
			display: inline-block;
			width: 14px;
			height: 20px;
			box-sizing: content-box;
		}
		.type-wrp-loading{
			padding-left: 10px;
			font-size: 12px;
			color: #99A2AA;
		}
		.data-error{
    		color: palevioletred;
    		font-size: 14px;
    	}
    </style>
  </head>
  <body>
	  <!--
	    	作者：913092806@qq.com
	    	时间：2017-05-06
	    	描述：导航栏开始
	   -->
		<div id="data-nav" class="nav navbar">
			<div class="container">
			  	<div class="navbar-header">
				     <a class="navbar-brand" href="/hoyo/">
			      		<img src="/hoyo/img/logo.png" class="data-img"/>
			      		<span class="data-span">主页</span>
		      		</a>
			    </div>
			
		      	<ul id="contributor" class="nav navbar-nav navbar-right">
			      	<li th:if="${session.userInfo!=null}">
			      		<a class="data-user" href="/hoyo/user/personalCenter">
			      			<img th:src="${session.userInfo.icon}" class="data-img img-circle" />
			      			<span class="nav-user-name" th:text="${session.userInfo.nickname}">iscream</span>
			      		</a>
			      	</li>
			      	<li th:if="${session.user==null}">
			      		<a href="/hoyo/login">
			      			<span>登录</span>
			      		</a>
			      	</li>
			      	<li th:if="${session.user==null}">
			      		<a href="/hoyo/register" style="padding-right:84px;">
			      			<span>注册</span>
			      		</a>
			      	</li>
			      	
			        <li class="dropdown">
			          <a href="/hoyo/upload" class="dropdown-toggle data-color">投稿</a>
			      	</li>
			      </ul>
			 </div>
		</div>
		<div class="container-fluid">
			<div class="container" >
				<div class="upload" id="upload-box">
					<div class="upload-btn" id="upload-btn"></div>
					<div class="upload-hint">拖拽视频到此处也可上传</div>
				</div>
				
				<div class="upload-explain" id="upload-explain">
					<h3 class="title">帮助及说明</h3>
					<ul class="help-menu">
						<li>
							<span class="dot"></span>
							<span>上传视频，即表示您已同意<a href="#">本站使用协议</a>请勿上传色情，反动等违法视频</span>
						</li>
						<li>
							<span class="dot"></span>
							<span>请保持上传的视频文件大小在1G以内</span>
						</li>
						<li>
							<span class="dot"></span>
							<span>请保持视频码率不超过1800kbps，音频码率不超过192kbps，否则会出现不可描述的事情</span>
						</li>
					</ul>
					<ul class="qa-list">
						<li><a href="#">
							<svg class="icon" aria-hidden="true">
  								<use xlink:href="#icon-liebiao"></use>
							</svg>
							<span>投稿须知</span>
						    </a>
						</li>
						<li><a href="#">
							<svg class="icon" aria-hidden="true">
  								<use xlink:href="#icon-wenti"></use>
							</svg>
							<span>常见问题</span>
						    </a>
						</li>
					</ul>
				</div>

				<div class="upload-container row" id="upload-container">
					<div class="col-lg-2" id="cover-wrp">
						<upload-poster :poster="cover"></upload-poster>
						<div class="cover-tip-wrp">
							<div class="tip-list">
								<div class="left-dot"></div>
								<div class="left tip-text">
									建议上传高清封面≥960*600
								</div>
							</div>
							<div class="tip-list">
								<span v-show="error" class="data-error">还没有上传封面哦(⊙o⊙)</span>
							</div>
						</div>
					</div>
					<div class="col-lg-10"  >
						<div class="upload-wrp" id="upload-wrp">
							<ul id="sortWrp" class="file-menu">
								<draggable :list="items" :options="{animation:150}" :no-transition-on-drag="true" @end="show()">
					        <transition-group>
					          <li class="sort-item menu-item row" v-for="item  in items" :key="item.fid" >
											<video-component1 :number="item.number"></video-component1>
											<video-component2 :file="item" :inx="item.index" :uploders="uploders"></video-component2>
										</li>
					        </transition-group>
					      </draggable>
					     		 <li v-show="error"  class="data-error">{{errorMsg}}</li>
							</ul>
							
							<div class="drag-hint">
								<span>拖拽视频可调整顺序</span>
							</div>
							<div style="display: none;" id="upload-button-group">
								<button id="upload1"></button>
								
							</div>
							<button class="btn upload-add-btn" id='true_upload'></button>
							
						</div>
						
						<div class="basic-info">
							<div class="basic-info-title">
								<span>基本信息</span>
								<div class="basic-info-icon">
  								<svg class="icon" aria-hidden="true">
									  <use xlink:href="#icon-sanjiao"></use>
									</svg>
  							</div>
							</div>
						</div>
						
<!--						<div class="section copyright-wrp">
							<h3>投稿类型</h3>
							<div class="control-group" style="margin-bottom: 15px;">
								<input type="radio" name="copyright" class="control-type-radio"/>
								<label class="control-type-label">自制</label>
								<input type="radio" name="copyright" class="control-type-radio"/>
								<label class="control-type-label">转载</label>
							</div>
							<input type="text" name="copy" class="form-control" placeholder="转载视频请注明来源，来源会显示在视频播放页的简介中" />
							<div class="title-hint">
								转载视频请注明来源（例：转自http://www.xxxx.com/yyyy），注明来源会更快地通过审核哦 
							</div>
						</div>-->
						
						<div class="section type-wrp" id="type-wrp">
							<h3>选择分区</h3>
							<div>
								<ul class="type-menu">
									<li v-for="item in items">
										<button type="button" class="type-btn" v-bind:class="{ 'is-selected': item.selected }" @click="choose(item.id,item.channelName)">{{item.channelName}}</button>
									</li>
								</ul>
							</div>
							<p class="type-wrp-loading" v-if="loading">数据加载中....</p>
							<div class="type-hint">
									你当前选择的分区是:
								<span class="outline">
									{{choosed}}
								</span>
							</div>
							<p v-show="error"  class="data-error">还没有选择分区哦 :-O</p>
						</div>
						
						<div class="section title-wrp" id="title-wrp" >
							<h3>稿件标题</h3>
							<div>
								<div class="title-wrp" v-if='titleShowed'>
									<input class="form-control" type="text" v-model="message" :value="message" v-bind:class="{ 'is-error': tolong }" placeholder="请输入稿件标题"/>
									<div class="count-wrp">
										{{length}}/80
									</div>
								</div>
								<div class="error-wrp" v-show="tolong||error" >
									<svg class="icon error-icon" aria-hidden="true">
									  <use xlink:href="#icon-linedesign-11"></use>
									</svg>
									{{errorMsg}}
								</div>
							</div>
						</div>
						
						<div class="section description-wrp" id="description-wrp">
							<h3>视频简介</h3>
							<div>
								<div class="description-wrp">
									<textarea class="form-control" v-model="message" v-bind:class="{ 'is-error': tolong }" placeholder="转载视频请注明来源（例：转自http://www.xxxx.com/yyyy），注明来源会更快地通过审核哦 "></textarea>
									<div class="count-wrp">
										{{length}}/250
									</div>
								</div>
							</div>
							<div class="error-wrp" v-show="tolong||error">
									<svg class="icon error-icon" aria-hidden="true">
									  <use xlink:href="#icon-linedesign-11"></use>
									</svg>
									{{errorMsg}}
								</div>
						</div>
						
						<div class="submit-wrp">
							<button class="btn btn-info" type="button"  id="btn-submit">提交稿件</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		
     </body>
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="/hoyo/js/jquery-3.2.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/hoyo/js/bootstrap.min.js"></script>
    <script src="/hoyo/js/vue.js"></script>
    <script src="/hoyo/js/iconfont.js"></script>
    <script type="text/javascript" src="/hoyo/js/plupload/moxie.js"></script>
	<script type="text/javascript" src="/hoyo/js/plupload/plupload.dev.js"></script>
	<script type="text/javascript" src="/hoyo/js/plupload/i18n/zh_CN.js"></script>
	<script src="/hoyo/js/Sortable.js"></script>
	<script type="text/javascript" src="/hoyo/js/vuedraggable.js"></script>
    <script src="/hoyo/js/qiniu.js"></script>
    <script th:inline="javascript">
			$(function() {
				var uploadfiles=[];
				var domain = "http://upload-z2.qiniu.com";
				var baseUrl = "/hoyo";
				var uploadTokenUrl = baseUrl + "/upload/token/private";
				var publicUploadToken = baseUrl + "/upload/token/public";
				
				//最终上传  total_info
				var total_info={
					'catalogName':'',
					'channelId': 0,
					'catalgPoster':'',
					'introduction':'',
					'movie':[]
				};
				var errorMsg={
				    'name':false,
				    'channel':false,
				    'catalogPoster':false,
				    'intro':false,
				    'movie':false
				}
				
				var poster={
					'name':'',
					'uploaded':false
				};
				var titleShowed=false;
				var btn_array=['upload1'];
				var uploader_array=[];
				var btn_index=1;
				
				var channels = [[${channels}]];
				channels.forEach(function(channel){
					channel.selected = false;
				});
				channels[0].selected = true;
				total_info.channelId = channels[0].id;
				
				uploader_array.push(new mainUploader(0));
				uploader_array.push(new mineUploader(btn_array[btn_index-1],btn_index));
				
				Vue.component('upload-poster',{
					props:{
						'poster':{
							type:Object,
							required:true
						}
					},
					template: "<div class='cover-wrp'><div class='cover-box is-pic' id='cover-box' @mouseover='hovered=true' @mouseout='hovered=false'><img class='cover-preview' id='preview' src=''/><div class='cover-mask' v-show='maskshow'>修改封面</div></div></div>",
					data:function(){
						return {
							uploaded:this.poster.uploaded,
							hovered:false
						}
					},
					computed:{
						maskshow:function(){
							if(!this.uploaded){
								var src = $('#preview').attr('src');
								this.uploaded = (src!='' && typeof(src)!="undefined")? true:false;
							}
							return this.hovered&&this.uploaded;
						}
					}
				});
				
				Vue.component("video-component1",{
					props:['number'],
					template: "<div class='left order-wrp col-lg-1'><div><svg class='icon file-icon' aria-hidden='true'><use xlink:href='#icon-wenjian'></use></svg></div><span class='order-num'>{{number}}</span></div>"
				});

				Vue.component("video-component2",{
					props:{
						'file':{
							type:Object,
							required:true
						},
						'inx':{
							type:Number,
							required:true
						},
						'uploders':{
							type:Array,
							required:true
						}
					},
					template: "<div class='left meta-wrp col-lg-11'><div class='status-wrp'><div class='name-wrp'><span class='name' title='点击可编辑名称' @click='qiehuan=true' v-show='!qiehuan'>{{file.name}}</span><input type='text'  class='name-input' placeholder='请输入分P标题名'  :value='file.name' @blur='qiehuan=false' v-show='qiehuan' v-model='file.name' style='display: none;'/></div><div class='upload-status'>{{file.info}}</div><div class='act-wrp right'><span class='act-wrp-btn' @mouseover='startOrPauseOn=true' @mouseout='startOrPauseOn=false' @click='uploadStart' v-if='!status'><svg class='icon' v-show='btnshow' aria-hidden='true'><use xlink:href='#icon-zanting3'></use></svg></span><span class='act-wrp-btn' @mouseover='startOrPauseOn=true' @mouseout='startOrPauseOn=false' @click='uploadPause' v-else ><svg class='icon' v-show='btnshow' aria-hidden='true'><use xlink:href='#icon-zanting'></use></svg></span><span class='act-wrp-btn' @mouseover='cancelOn=true' @mouseout='cancelOn=false' @click='uploadCancel' ><svg class='icon' v-show='cancelOn' aria-hidden='true'><use xlink:href='#icon-shanchu'></use></svg></span></div></div><div class='progress-wrp'><div class='progress' ><div class='progress-bar progress-bar-info' role='progressbar' :aria-valuenow='file.valuenow' aria-valuemin='0' aria-valuemax='100' :style='{width: file.currentPercent }'></div></div></div></div>",
					
					data:function(){
						return {
							qiehuan:false,
							startOrPauseOn:false,
							cancelOn:false,
						}
					},
					computed:{
						btnshow:function(){
							return this.startOrPauseOn&&parseInt(this.file.valuenow)<100;
						},
						status:function(){
							return this.file.status;
						}
					},
					methods:{
						uploadStart:function(){
							this.uploders[this.inx].start();
							this.file.status=true;
						},
						uploadPause:function(){
							this.uploders[this.inx].stop();
							this.file.status=false;
						},
						uploadCancel:function(){
							var id=this.uploders[this.inx].id
							uploadfiles.forEach(function(ele,index,array){
								if(ele.fid===id){
									uploadfiles.splice(index,1);
								}
							});
							this.uploders[this.inx].destroy();
							uploadfiles.forEach(function(ele,index,array){
								ele.number= index+1;
							});
						}
					}
				});
				
				
				var coverWrp = new Vue({
					el:'#cover-wrp',
					data:{
						cover:poster,
						error:false
					}
				});
	    	
	    		var sortWrp = new Vue({
						el:'#sortWrp',
						data:{
							items:uploadfiles,
							uploders:uploader_array,
							error:false,
							errorMsg:''
						},
						methods:{
							show:function(){
								this.items.forEach(function(ele, index, array) {
								  ele.number= index+1;
								});
							}
						}
				});
				
				var typeVm=new Vue({
					el:'#type-wrp',
					data:{
						items: channels,
						loading:false,
						choosed:channels[0].channelName,
						error:false
					},
					methods:{
						choose:function(name,description){
							this.items.forEach(function(ele, index, array) {
									if(ele.id===name){
										ele.selected=true;
									}else{
										ele.selected=false;
									}
							});
							total_info.channelId=name; //todo
							this.choosed=description;
						}
					}
				});
				
				var titleVm=new Vue({
					el:'#title-wrp',
					data:{
						message:'',
						titleShowed:false,
						error:false,
						errorMsg:''
					},
					computed:{
						length:function(){
							total_info.catalogName=this.message; //todo
							return this.message.split('').length;
						},
						tolong:function(){
							var islong = this.length>80;
							if(islong){
								this.errorMsg = "标题不能超过80个字符";
							}else{
								this.errorMsg = "";
								this.error = false;
							}
							return islong;
						}
					}
				});
				
				var descriptionWrp = new Vue({
					el:'#description-wrp',
					data:{
						message:'',
						error:false,
						errorMsg:''
					},
					computed:{
						length:function(){
							total_info.introduction=this.message;   //todo
							return this.message.split('').length;
						},
						tolong:function(){
							var islong = this.length>250;
							if(islong){
								this.errorMsg = "标题不能超过250个字符";
							}else{
								this.errorMsg = "";
								this.error = false;
							}
							return islong;
						}
					}
				});
				
				
				
				posterUploader();
				
				$('#true_upload').click(function(){
						var id="upload"+(btn_index+1);
					  $('#upload-button-group').append("<button id='"+id+"'></button>");
					  btn_array.push(id);
					 	$('#'+btn_array[btn_index-1]).click();					  
					  btn_index++;
					 	uploader_array.push(new mineUploader(btn_array[btn_index-1],btn_index));
				});
				
				
				function posterUploader(){
					return new new QiniuJsSDK().uploader({
			        browse_button: 'cover-box',
			        container: 'upload-wrp',
			        uptoken_url: publicUploadToken,
			        domain: domain,
			        auto_start: true,
			        multi_selection:false,
			        filters : {
					    max_file_size : '1mb',
					    prevent_duplicates: true,
					    mime_types: [
					        { title : "Image files", extensions : "jpg,gif,png" } // 表示只允许上传图片类型 jpg,gif,png
					    ]
					},
			        get_new_uptoken: true,
			        init: {
			        		'BeforeUpload': function(up, file) {
			            	
			            },
			            'FileUploaded': function(up, file, info) {
			            	poster.name =JSON.parse(info).key;
							poster.uploaded=true;
							$('#preview').attr('src','http://oq1q7n96r.bkt.clouddn.com/'+poster.name);
							total_info.catalgPoster=JSON.parse(info).key;
				          },
				        	'Key': function(up, file) {
		            	  var exe = file.name.split('.');
			              var key = up.id+Date.now()+'.'+exe[exe.length-1];
			              return key;
			           }
		        }
				  });
				}
				
				function mineUploader(buttonId,eindex){
					
					return new QiniuJsSDK().uploader({
				        runtimes: 'html5,flash,html4',
				        browse_button: buttonId,
				        container: 'upload-wrp',
				        flash_swf_url: 'js/plupload/Moxie.swf',
				        dragdrop: false,
				        chunk_size: '4mb',
				        multi_selection: false,
				        uptoken_url: uploadTokenUrl,
				        domain: domain,
				        filters : {
				        	max_file_size: '1024mb',
						    prevent_duplicates: true,
						    mime_types: [
						        { title : "video files", extensions : "mp4" }
						    ]
						},
				        get_new_uptoken: true,
				        auto_start: true,
				        log_level: 1,
				        init: {
				            'FilesAdded': function(up, files) {
			                	var info = {
			                		"fid": up.id,
			                		"number":uploadfiles.length+1,
			                		"name":'',
			                		"info":'准备上传中...',
			                		'status':true,
			                		'completed':false,
			                		"currentPercent":'0%',
			                		'valuenow':0,
			                		'resourceName':'',
			                		'index':eindex
			                	}
			                	uploadfiles.push(info);
				            },
				            'BeforeUpload': function(up, file) {
				            	uploadfiles.forEach(function(ele,index,array){
				            		if(ele.fid===up.id){
				            			ele.name=file.name.substring(0,file.name.lastIndexOf('.'));
				            		}
				            	});
				            },
				            'UploadProgress': function(up, file) {
				            	uploadfiles.forEach(function(ele,index,array){
				            		if(ele.fid===up.id){
				            			ele.info="进度: "+file.percent + "% 上传速度: "+plupload.formatSize(file.speed).toUpperCase()+"/s";
				            			ele.currentPercent=file.percent + "%";
				            			ele.valuenow=file.percent;
				            		}
				            	});
				            },
				            'FileUploaded': function(up, file, info) {
				            	uploadfiles.forEach(function(ele,index,array){
				            		if(ele.fid===up.id){
				            			ele.info='上传完成';
				            			ele.currentPercent="100%";
				            			ele.valuenow=100;
				            			ele.resourceName=JSON.parse(info).key;
				            			ele.completed=true;
				            		}
				            	});
				            },
				            
				            'Error': function(up, err, errTip) {
				            },
				            
				            'Key': function(up, file) {
				            	 var exe = file.name.split('.');
					             var key = up.id+Date.now()+'.'+exe[exe.length-1];
					             return key;
				            }
				        }
				    });
				}
				
				function mainUploader(eindex){
					return new QiniuJsSDK().uploader({
			        runtimes: 'html5,flash,html4',
			        browse_button: 'upload-btn',
			        container: 'upload-box',
			        drop_element: 'upload-box',
			        flash_swf_url: 'js/plupload/Moxie.swf',
			        dragdrop: true,
			        chunk_size: '4mb',
			        multi_selection: false,
			        //uptoken:${uploadToken},
        			uptoken_url: uploadTokenUrl,  
       				domain: domain,
       			 	filters : {
			        	max_file_size: '1024mb',
					    prevent_duplicates: true,
					    mime_types: [
					        { title : "video files", extensions : "mp4" }
					    ]
					},
			        get_new_uptoken: true,
			        auto_start: true,
			        log_level: 1,
			        init: {
			            'FilesAdded': function(up, files) {
			                	var info = {
			                		"fid": up.id,
			                		"number":uploadfiles.length+1,
			                		"name":'',
			                		"info":'准备上传中...',
			                		'status':true,
			                		'completed':false,
			                		"currentPercent":'0%',
			                		'valuenow':0,
			                		'resourceName':'',
			                		'index':eindex
			                	}
			                	uploadfiles.push(info);
			                	$('#upload-box').hide();
				                $('#upload-explain').hide();
				                $('#upload-container').show();
				            },
				            'BeforeUpload': function(up, file) {
				            	uploadfiles.forEach(function(ele,index,array){
				            		if(ele.fid===up.id){
				            			ele.name=file.name.substring(0,file.name.lastIndexOf('.'));
				            		}
				            	});
				            	titleVm.message=file.name.substring(0,file.name.lastIndexOf('.'))
				            	titleVm.titleShowed=true;
				            },
				            'UploadProgress': function(up, file) {
				            	uploadfiles.forEach(function(ele,index,array){
				            		if(ele.fid===up.id){
				            			ele.info="进度: "+file.percent + "% 上传速度: "+plupload.formatSize(file.speed).toUpperCase()+"/s";
				            			ele.currentPercent=file.percent + "%";
				            			ele.valuenow=file.percent;
				            		}
				            	});
				            },
				            'FileUploaded': function(up, file, info) {
				            	uploadfiles.forEach(function(ele,index,array){
				            		if(ele.fid===up.id){
				            			ele.info='上传完成';
				            			ele.currentPercent="100%";
				            			ele.valuenow=100;
				            			ele.resourceName=JSON.parse(info).key;
				            			ele.completed=true;
				            		}
				            	});
				            	console.log(info);
				            },
				            'Error': function(up, err, errTip) {
				            },
				            'Key': function(up, file) {
				            	 var exe = file.name.split('.');
					             var key = up.id+Date.now()+'.'+exe[exe.length-1];
					             return key;
				            }
			        }
			    });
				}
				
				$('#btn-submit').click(function(){
					$('#btn-submit').attr("disabled",true);
					event.preventDefault();
					total_info.movie.splice(0,total_info.movie.length);
					var error = false;
					
					uploadfiles.forEach(function(ele,index,array){
						var movie = {
							'movieName':ele.name,
							'sortNumber':ele.number,
							'resourceName':ele.resourceName
						};
						total_info.movie.push(movie);
					});
					
					if(total_info.movie.length==0){
						sortWrp.error=true;
						sortWrp.errorMsg="请上传视频。。。";
						$('#btn-submit').attr("disabled",false);
						return ;
					}
					
					total_info.movie.forEach(function(ele,index,array){
						if(ele.resourceName.trim()==""){
							error = true;
						}
					});
					
					if(error){
						sortWrp.error=true;
						sortWrp.errorMsg="当前还有视频进行上传中，请等待上传完成。。。";
						$('#btn-submit').attr("disabled",false);
						return ;
					}
					
					sortWrp.error=false;
					
					if(total_info.catalogName.trim()==""||total_info.catalogName.trim().length>80){
						titleVm.error = true;
						titleVm.errorMsg = "标题不能为空或超出80个字符";
						$('#btn-submit').attr("disabled",false);
						return ;
					}
					titleVm.error = false;
					
					if(total_info.introduction.trim()==""||total_info.introduction.trim().length>250){
						descriptionWrp.error = true;
						descriptionWrp.errorMsg = "标题不能为空或超出250个字符";
						$('#btn-submit').attr("disabled",false);
						return ;
					}
					descriptionWrp.error = false;
					
					if(total_info.channelId==0){
						typeVm.error = true;
						$('#btn-submit').attr("disabled",false);
						return ;
					}
					typeVm.error = false;
					
					if(total_info.catalgPoster.trim()==""){
						coverWrp.error = true;
						$('#btn-submit').attr("disabled",false);
						return ;
					}
					coverWrp.error = false;
					
					$.post({
					   data: "catalog="+JSON.stringify(total_info),
					   url: baseUrl + "/user/upload",
					   success: function(msg, textStatus, jqXHR){
						   var result = JSON.parse(msg);
						   if(!msg.success){
							   console.log(msg.errorMsg);
						   }
						   $('#btn-submit').attr("disabled",false);
						   document.location.href="/hoyo/user/personalCenter";
					   }
					});
				});
			});
    </script>
  </body>
</html>